<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <!-- 总的一行 -->
    <el-row :gutter="20">
      <!-- 左边 -->
      <el-col :span="18">
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="14">
            <el-card style="height: 150px" class="userWork">
              <h4>工单统计<span>{{monthOne}} ~ {{date}}</span></h4>
              <div class="body">
                <div class="stats">
                  <div class="item">
                    <div class="num">{{ total }}</div>
                    <div class="text">工单总数（个）</div>
                  </div>
                  <div class="item">
                    <div class="num">{{ completedTotal }}</div>
                    <div class="text">完成工单（个）</div>
                  </div>
                  <div class="item">
                    <div class="num">{{ workerCount }}</div>
                    <div class="text">进行工单（个）</div>
                  </div>
                  <div class="item">
                    <div class="num">{{ cancelTotal }}</div>
                    <div class="text">取消工单（个）</div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card style="height: 150px" class="sale">
              <h4>销售统计<span>{{monthOne}} ~ {{date}}</span></h4>
              <div class="body">
                <div class="stats">
                  <div class="item">
                    <div class="num">{{ orders }}</div>
                    <div class="text">订单量（个）</div>
                  </div>
                  <div class="item">
                    <div class="num">{{ saleNum }}</div>
                    <div class="text">销售额（万元）</div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card style="height: 330px" class="shop">
              <h4>销售数据<span>{{monthOne}} ~ {{date}}</span></h4>
              <!-- <MySale/> -->
              <MySaleInfo/>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右边 -->
      <el-col :span="6">
        <el-card style="height: 500px" class="hot">
          <h4>商品热榜<span>{{monthOne}} ~ {{date}}</span></h4>
          <div class="body">
            <el-row v-for="(item, index) in topGoods" :key="index">
              <el-col :span="5" class="top">{{ index + 1 }}</el-col>
              <el-col :span="13" class="text">{{ item.skuName }}</el-col>
              <el-col :span="6" class="num">{{ item.count }}单</el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="20">
      <el-col :span="15">
        <el-card style="height: 330px" class="cooperate">
          <h4>合作商点位数Top5</h4>
          <Echarts></Echarts>
          <div class="collect">
            <div class="count">{{node}}</div>
            <div class="name">点位数</div>
            <div class="count">{{partner}}</div>
            <div class="name">合作商数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card style="height: 330px" class="bad">
          <h4 class="title">异常设备监控</h4>
          <div class="empty">
            <img src="@/assets/home/empty.png" alt="" />
            <div class="tip">暂无数据</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// getUserWork,
import {
  getCooperation,
  getOrderCount,
  getSaleNum,
  getHotGoods,
  getNode,
  getPartner
} from '@/api/home'
import Echarts from '@/components/echarts.vue'
import MySaleInfo from '@/components/MySaleInfo'
// import MySale from '@/components/MySale.vue'
export default {
  components: {
    Echarts,
    MySaleInfo
    // MySale
  },
  data () {
    return {
      // 工单统计参数
      userWork: [],
      orders: '',
      saleNum: '',
      // 热榜
      topGoods: [],
      // 点位
      Point: [],
      node: '',
      partner: '',
      // 获取当天时间
      date: dayjs().format('YYYY-MM-DD'),
      // 当前时间点--时分秒
      time: dayjs().endOf().format('YYYY-MM-DD HH:mm:ss'),
      // 今年的第一天
      yearOne: dayjs().format('YYYY') + '-01-01',
      // 本月的第一天
      monthOne: dayjs().startOf('month').format('YYYY-MM-DD'),
      // 本周的第一天
      weekOne: dayjs()
        .subtract(dayjs().day() ? dayjs().day() - 1 : 6, 'day')
        .format('YYYY-MM-DD')
    }
  },
  async created () {
    const res = await getCooperation()
    console.log(res)
    this.userWork = res
    const Orders = await getOrderCount()
    // console.log(Orders)
    this.orders = Orders
    const SaleNum = await getSaleNum()
    // console.log(SaleNum)
    this.saleNum = (SaleNum / 1000000).toFixed(2)
    this.topGoods = await getHotGoods()
    // console.log(this.topGoods)
    this.node = await getNode()
    this.partner = await getPartner()
  },
  computed: {
    // 工单总数
    total () {
      return this.userWork.reduce((sum, item) => {
        return sum + item.total
      }, 0)
    },
    // 完成工单
    completedTotal () {
      return this.userWork.reduce((sum, item) => {
        return sum + item.completedTotal
      }, 0)
    },
    // 进行工单
    workerCount () {
      return this.userWork.reduce((sum, item) => {
        return sum + item.progressTotal
      }, 0)
    },
    // 取消工单
    cancelTotal () {
      return this.userWork.reduce((sum, item) => {
        return sum + item.cancelTotal
      }, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  border-radius: 15px;
  ::v-deep .el-card__body {
    padding: 0px 20px;
  }
  span {
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
  }
}
.userWork {
  background: #e9f3ff;
  background-image: url(~@/assets/home/bgblue.png),
    url(~@/assets/home/userWork.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  .body {
    -webkit-box-flex: 1;
    flex: 1;
    display: flex;
    .stats {
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      .item {
        margin: 0 8px;
        text-align: center;
        color: #91a7dc;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        .num {
          color: #072074;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 50px;
        }
        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 17px;
        }
      }
    }
  }
}
.sale {
  background: #fbefe8 url(~@/assets/home/sale.png) no-repeat calc(100% - 12px)
    100%;
  .body {
    -webkit-box-flex: 1;
    flex: 1;
    display: flex;
    .stats {
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      .item {
        margin: 0 20px;
        text-align: center;
        color: #de9690;
        display: inline-flex;
        // -webkit-box-orient: vertical;
        // -webkit-box-direction: normal;
        flex-direction: column;
        .num {
          color: #ff5757;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 50px;
        }
        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 17px;
        }
      }
    }
  }
}

.shop {
  margin: 20px 0;
  padding: 0;
  ::v-deep .el-card__body {
  padding: 0;
}
h4 {
  margin-left: 20px;
}
}
.hot {
  .el-row {
    height: 42px;
    width: 100%;
    .top {
      margin: 0 10px;
      text-align: center;
      width: 21px;
      height: 20px;
      background: url(~@/assets/home/Other.png);
      color: #8e5900;
    }
    .text {
      height: 30px;
      width: 120px;
      line-height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .num {
      color: #737589;
      font-family: PingFangSC-Regular, PingFang SC;
      font-size: 14px;
      font-weight: 400;
    }
  }
}
.cooperate {
  position: relative;
  .collect {
    position: absolute;
    top: 60px;
    right: 40px;
    padding: 0 10px;
    width: 104px;
    height: 180px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
      linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
      linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
      linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    .count {
      height: 33px;
      font-size: 24px;
      font-weight: 600;
      color: #072074;
      line-height: 33px;
    }
    .name {
      height: 17px;
      margin-top: 6px;
      margin-bottom: 20px;
      font-size: 12px;
      font-weight: 400;
      color: #000412;
      line-height: 17px;
    }
  }
}

.bad {
  padding: 0;
  .empty {
    margin-top: 70px;
    margin-left: 50px;
    text-align: center;
    .tip {
      margin-top: 25px;
      color: #20232a;
      font-size: 14px;
    }
  }
}
</style>
